<template>
  <div>
    App {{ money }}
    <hr />
    <Parent />
  </div>
</template>

<script>
import { ref, provide } from 'vue'
import Parent from './Parent.vue'
export default {
  components: {
    Parent,
  },
  setup() {
    const money = ref(100)
    // #1 祖先通过 provide 提供数据
    provide('money', money)
    // #3 祖先提供一个修改数据的方法
    const updateMoney = (m) => {
      money.value += m
    }
    provide('updateMoney', updateMoney)
    return { money }
  },
}
</script>

<style lang="scss" scoped></style>
